<script setup lang="ts">
import { onMounted } from "vue";
import { useSysApi } from "./useSysApi";

const modelValue = defineModel({ type: Array<string> });
const emit = defineEmits(["change"]);
const { query, apiList, apiTree, reloadApiList } = useSysApi();

const onCheckChange = (node: any, info: { checkedKeys: any }) => {
  modelValue.value = info.checkedKeys;
  emit("change", info.checkedKeys);
};

onMounted(() => {
  reloadApiList(true);
});
</script>

<template>
  <el-tree-v2
    style="width: 100%"
    :default-checked-keys="modelValue"
    show-checkbox
    :data="apiTree"
    :props="{ value: 'id', label: 'title' }"
    @check="onCheckChange"
  >
    <template #default="{ node }">
      <el-tooltip :content="node.data.path" placement="top">
        <span>{{ node.data.title }}</span>
      </el-tooltip>
    </template>
  </el-tree-v2>
</template>
<style lang="scss" scoped></style>
